var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var fs = require('fs');
var path = require('path');

var ipc = require('electron').ipcRenderer;
var remote = require('electron').remote;
const dialog = remote.dialog;
var storage = remote.require('electron-storage');
var app = require('electron').remote.app;
var api = require('./api.js');

var Setting = createReactClass({
    getInitialState: function() {
        return {
        };
    },

    componentWillMount: function() {
        storage.get("token.json")
            .then(data => {
                console.log("data:", data);
                api.accessToken = data.accessToken;
                var avatar = data.avatar ? data.avatar : "./images/_avatar.png";
                this.setState({
                    name: data.name,
                    avatar:avatar,
                    uid: data.uid,
                })
            });
    },

    onExit: function() {
        console.log("on exit");
        api.logout()
            .then(() => {
                ipc.send('exit');
                window.close();
            })
            .catch((err) => {
                console.error("logout err:", err);
                ipc.send('exit');
                window.close();
            });
    },
    
    render: function() {
        var name = this.state.name;
        var version = "<span>" + app.getName() + "</span>   <span>" + app.getVersion() + "</span>";
        console.log("version:", version);
        return (<div className="container">
                    <div className="user">
                        <img className="avatar" src={this.state.avatar}/>
                        <div>{name}</div>
                        <button onClick={this.onExit} id="exit">退出登录</button>
                    </div>
                    <div id="version">
                    <span>{app.getName()}</span><span style={{marginLeft:"20px"}}>{app.getVersion()}</span>
                    </div>
                </div>);
    }
});


ReactDOM.render(
    <Setting/>,
    document.getElementById('root')
);
